<template>
  <div class="panelplay">
    <div class="bg-overlay" :style="`background-image: url(${audio.imgUrl})`"></div>
    <div class="play-overlay"></div>
    <section class="panel-play-bd">
      <div class="panel-play-img-box">
        <img :src="imgUrl" />
      </div>
      <div class="panel-play-lrc-box">
        <div class="panel-play-lrc" ref="panelPlayLrc" :style="{'margin-top':-lrcOffset+'px'}">
          <!--<p class="current">
                          杨宗纬 - 天龙八部（《天龙八部》手游主题曲)
                        </p>-->
          <p v-for="(lrc,index) in songLrc" :class="{'current':lrc.seconds>=audio.currentLength}">{{lrc.lrcContent}}</p>
        </div>
      </div>
      <section class="time-wrap">
        <div class="timeshow">{{audio.currentLength | time}}</div>
        <div class="progress-wrap">
          <div class="progress-bar">
            <div class="preview-progress" ref="range" @click="rangeChange($event)"></div>
            <div class="progress" :style="`width:${changeLrcWidth}`" @click="rangeChange($event)">
              <span></span>
            </div>
          </div>
        </div>
        <div class="timeshow">{{audio.songLength | time}}</div>
      </section>
      <div class="play-operate">
        <i class="btn-prev" @click="prevSong()"></i>
        <i class="btn-play" :class="{'btn-pause':isPlay}" @click="togglePlay()"></i>
        <i class="btn-next" @click="nextSong()"></i>
      </div>
      <div class="download-box">
        <i></i>
        下载这首歌
      </div>
    </section>
    <p style="visibility: hidden;height:20px">兼容iphone5c,ipone6</p>
  </div>
</template>
<script>
import {mapGetters} from 'vuex';
export default {
  name: 'panel_player',
  data() {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  computed: {
    ...mapGetters(['audio', 'isPlay', 'songList', 'songIndex']),
      imgUrl(){
        var temp = this.audio.imgUrl.split('/100');
        return temp[0] + '/240' + temp[1]
      },
      changeLrcWidth(){
        return (this.audio.currentLength/this.audio.songLength)*100 + '%';
      },
      songLrc(){
        if (this.audio.lrc) {
          var temp = this.audio.lrc.split('\r\n');
          temp = temp.splice(0, temp.length - 1);
          temp = temp.map((value)=> {
           
            var time = value.substr(1, 5);
            var seconds = parseInt(time.split(':')[0]) * 60 + parseInt(time.split(':')[1]);
            var lrcContent = value.substr(10);
            return {
              seconds, // 用时
              lrcContent, // 歌词
            }
          })
          return temp;
        }
      },
      lrcOffset(){
        let playLrcHeight = 0;
        if(this.$refs.panelPlayLrc){
          playLrcHeight = this.$refs.panelPlayLrc.clientHeight;
        }
      
        if (this.songLrc) {
          // console.log(this.songLrc.length )
          // var offset = 0;
          
          // if(this.$refs.panelPlayLrc){
          //     console.log(999)
          //    offset = 2 * this.$refs.panelPlayLrc.childNodes[0].clientHeight;
          // }
          // return offset;
          // var offset = (this.songLrc.length - document.querySelectorAll('.isCurrentLrc').length - 2) * (-20);
          // return this.audio.currentLength + offset - this.audio.currentLength;
          return (this.audio.currentLength/this.audio.songLength) * playLrcHeight;
        }
      }
  },
  mounted() {
   
 
    console.log(this.changeWidth)  
  },
  methods:{
    togglePlay() {
      if (this.isPlay) {
        document.getElementById('audioPlay').pause();
      } else {
        document.getElementById('audioPlay').play();
      }
      this.$store.commit('isPlay', !this.isPlay);
    },
    prevSong(){
      let index = this.songIndex;
      if (index == 0) {
        index = this.songList.length
      } else {
        --index;
      }
      this.$store.commit('isPlay', true);
      this.$store.commit('setSongIndex', index);
      this.$store.dispatch('changeSong');
    },
    nextSong() {
      let index = this.songIndex;
      if (index == this.songList.length - 1) {
        index = 0
      } else {
        ++index;
      }
      this.$store.commit('isPlay', true);
      this.$store.commit('setSongIndex', index);
      this.$store.dispatch('changeSong');
    },
    rangeChange(e){
        // console.log(this.songLrc.length)
        let vm = this;
        console.dir(this.$refs.panelPlayLrc)

         let index = 0;
          let  _getSongIndex = function() {
          if(vm.$refs.panelPlayLrc){
            
            for(let i = 0,len = vm.$refs.panelPlayLrc.childNodes.length;i < len;i++){
               console.log(999)
              if(vm.$refs.panelPlayLrc.childNodes[i].style.className) {
                index = i;
               
               return _getSongIndex();
              }
            }
          }
        }
        _getSongIndex();
        console.log(index)
        //  this.$refs.panelPlayLrc.offsetTop = 500;
      var offset = e.offsetX;
      let rangeWidth = this.$refs.range.clientWidth;
      var clickLength = Math.floor(offset * this.audio.songLength / rangeWidth);
        if (offset < rangeWidth) {
          this.$store.commit('setAudioTime', clickLength);
          // this.$store.commit('isPlay', true);
          this.$store.commit('setCurrent', true);
        }
    }
  },
  filters: {
    time(value){
      var length = Math.floor(parseInt(value));
      var minute = Math.floor(value / 60);
      if (minute < 10) {
        minute = '0' + minute;
      }
      var second = length % 60;
      if (second < 10) {
        second = '0' + second;
      }
      return minute + ':' + second;
    }
  },
}
</script>

<style lang="stylus"  scoped>
  .panelplay
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
  .bg-overlay
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: url(../../assets/images/index/logo_kugou.png) no-repeat 50%;
    background-size: cover;
    filter: blur(15px);
  .play-overlay
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(0,0,0,.6);
  .panel-play-bd
    width: 100%;
    padding-top: 6.0174rem;
    padding-bottom: 2.5rem;
    position: relative;
    .panel-play-img-box
      width: 10.7143rem;
      height: 10.7143rem;
      margin: 1.4286rem auto 0;
      img
        width:100%;
    .panel-play-lrc-box
      height: 3.8rem;
      overflow: hidden;
      margin-top: .8928rem;
      text-align: center;
      color: #afabac;
    .panel-play-lrc
      // height: 3.8rem;
      overflow: hidden;
      p 
        width: 100%;
        height: 1.7857rem;
        line-height: 1.7857rem;
        vertical-align: top;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        font-size: .8571rem;
      .current
        color:#d1c90e;
  // 时间
  .time-wrap
    width: 100%;
    padding: .8928rem .7143rem;
    display:flex;
    align-items:center;
    box-sizing: border-box;
    .timeshow
      font-size: .6428rem;
      color: #dcdcdc;
    .progress-wrap
      height: .1785rem;
      margin: 0 .5357rem;
      background: #232228;
      position: relative;
      z-index: 2;
      flex:1;
    .progress-bar
      width: 100%;
      height: 100%;
    .preview-progress
      position: absolute;
      top: 0;
      left: 0;
      display: block;
      width: 0;
      height: 100%;
      background: #6c6b70;
      width: 100%;
    .progress
      position: absolute;
      top: 0;
      left: 0;
      display: block;
      width: 0;
      height: 100%;
      background: #3195fd;
      span
        background: #3195fd;
        position: absolute;
        top: 50%;
        right: -.4rem;
        margin-top: -.3572rem;
        width: .7143rem;
        height: .7143rem;
        display: block;
        border-radius: 100%;
  .play-operate
    margin: 0 auto;
    font-size: 0;
    text-align: center;
    .btn-prev
      background: url(../../assets/images/index/play_prev.png) no-repeat;
      background-size: 100%;
      width: 2.3214rem;
      height: 2.4rem;
      margin: 0 .8929rem;
      display: inline-block;
      vertical-align: middle;
    .btn-play
      background: url(../../assets/images/index/play_play.png) no-repeat;
      background-size: 100%;
      width: 3.2143rem;
      height: 3.2143rem;
      margin: 0 .8929rem;
      display: inline-block;
      vertical-align: middle;
    .btn-pause
      background: url(../../assets/images/index/play_pause.png) no-repeat;
      background-size: 100%;
      width: 3.2143rem;
      height: 3.2143rem;
      margin: 0 .8929rem;
      display: inline-block;
      vertical-align: middle;
    .btn-next
      background: url(../../assets/images/index/play_next.png) no-repeat;
      background-size: 100%;
      width: 3.2143rem;
      height: 3.2143rem;
      margin: 0 .8929rem;
      display: inline-block;
      vertical-align: middle;
  .download-box
    width: 56.25%;
    height: 2.5rem;
    line-height: 2.5rem;
    margin: 1.0714rem auto 0;
    text-align: center;
    color: #fff;
    background: #259ef7;
    font-size: 1rem;
    border-radius: 5px;
    i
      width: 1.6rem;
      height: 1.6rem;
      display: inline-block;
      vertical-align: middle;
      background: url(../../assets/images/index/download_icon.png) no-repeat;
      background-size: 100%;
</style>
